<template>
  <div class="print-boxbody">
    <div class="dayCheck-box" id="printMe">
      <div class="dayCheck-header">
        每日食品安全检查记录
      </div>
      <div class="dayCheck-title">
        <div class="dayCheck-title-left">
          单位名称：{{ printData ? printData.schoolName : '' }}
        </div>
        <div class="dayCheck-title-right">
          检查时间：{{ printData ? printData.day : '' }}
        </div>
      </div>
      <div class="dayCheck-table">
        <div class="dayCheck-table-in">
          <div class="dayCheck-table-th">
            <div class="dayCheck-table-td">
              序号
            </div>
            <div class="dayCheck-table-td">
              检查项目
            </div>
            <div class="dayCheck-table-td">
              检查结果
            </div>
            <div class="dayCheck-table-td">
              不符合说明
            </div>
            <div class="dayCheck-table-td">
              <span>责任部门</span>
              <span>及责任人</span>
            </div>
            <div class="dayCheck-table-td">
              <span>不符合项</span>
              <span>采取的防范措施</span>
            </div>
          </div>
          <div class="dayCheck-table-tr" v-for="(item, index) in tableList" :key="index">
            <div class="dayCheck-table-td">
              {{ index + 1 }}
            </div>
            <div class="dayCheck-table-td">
              {{ item.name }}
            </div>
            <div class="dayCheck-table-td">
              <div class="dayCheck-table-td-box">
                <p>
                  符合
                  <span class="box-i-span">
                  <span class="box-i-span-in" v-if="Number(item.is_qualified)==1">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>
                </p>
                <p>
                  不符合
                  <span class="box-i-span">
                  <span class="box-i-span-in" v-if="!Number(item.is_qualified)">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>
                </p>
              </div>
            </div>
            <div class="dayCheck-table-td">
              {{ item.result || '' }}
            </div>
            <div class="dayCheck-table-td">
              {{ item.user_name || '' }}
            </div>
            <div class="dayCheck-table-td">
              {{ item.rectify || '' }}
            </div>
          </div>
        </div>
        <div class="dayCheck-remark-a">
          <div class="dayCheck-remark-a-td">
            经营情况说明
          </div>
          <div class="dayCheck-remark-a-td dayCheck-remark-a-td-box">
            <div class="dayCheck-remark-a-td-l">
              正常经营
              <span class="box-i-span">
                  <span class="box-i-span-in" v-if="printData && Number(printData.is_business)==1">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>;
            </div>
            <div class="dayCheck-remark-a-td-l">
              未经营
              <span class="box-i-span">
                  <span class="box-i-span-in" v-if="printData && !Number(printData.is_business)">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>
            </div>
          </div>
        </div>
        <div class="dayCheck-remark-b">
          <div class="dayCheck-remark-b-td">
            检查结果说明
          </div>
          <div class="dayCheck-remark-b-td">
            <div class="dayCheck-remark-b-td-line">
              <div class="dayCheck-remark-b-td-line-a">
                未发现问题<span class="box-i-span">
                  <span class="box-i-span-in" v-if="printData && !printData.result">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>；
              </div>
              <div class="dayCheck-remark-b-td-line-a">
                发现问题并采取防范措施
                <span class="box-i-span">
                  <span class="box-i-span-in" v-if="printData && printData.result">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>，
                具体如下
              </div>
            </div>
            <div class="dayCheck-remark-b-td-content">
              {{ printData && printData.result ? printData.result : '' }}
            </div>
          </div>
        </div>
        <div class="dayCheck-sign">
          <div class="dayCheck-sign-left">
            检查人签名：
            <img :src="printData.user_sign" alt="" v-if="printData && printData.user_sign">
            {{ printData && printData.user ? printData.user.realname : '' }}
          </div>
          <div class="dayCheck-sign-right">
            <span>{{checkTime_1[0] || ''}}</span>
            <span>年</span>
            <span>{{checkTime_1[1] || ''}}</span>
            <span>月</span>
            <span>{{checkTime_1[2] || ''}}</span>
            <span>日</span>
          </div>
        </div>
        <div class="dayCheck-sign">
          <div class="dayCheck-sign-left">
            负责人签名：
            <div v-if="printData && printData.user_list.length" class="sign-list-line">
              <img :src="item.user_sign" alt="" v-for="item in printData.user_list">
            </div>
          </div>
          <div class="dayCheck-sign-right">
            <span>{{checkTime_1[0] || ''}}</span>
            <span>年</span>
            <span>{{checkTime_1[1] || ''}}</span>
            <span>月</span>
            <span>{{checkTime_1[2] || ''}}</span>
            <span>日</span>
          </div>
        </div>
      </div>
      <div class="dayCheck-footer">
        <div class="dayCheck-footer-title">
          记录填写说明：
        </div>
        <div>1、食品安全员正常经营期间每日根据日管控风险管控清单进行检查，形成《每日食品安全检查记录》；</div>
        <div> 2、针对相应的检查项目，在检查结果栏打“ √ ”，如检查发现不符合，需要在“不符合项说明”栏中详细记录不符合具体内容；</div>
        <div>3、对发现的食品安全风险隐患，应当立即采取防范措施，按照程序及时上报食品安全总监（食品安全负责人）或者主要负责人。</div>
      </div>
    </div>
    <button v-print="'#printMe'" class="btn-print-box">打印</button>
  </div>
</template>

<script>
export default {
  name: "dayPrint",
  data() {
    return {
      tableList: [],
      printData: null,
      checkTime_1: []
    }
  },
  methods:{
    getData(option){
      if (option) {
        this.printData = option?JSON.parse(option):''
        this.checkTime_1 = this.printData?this.printData.day.split('-'):''
        this.tableList = JSON.parse(this.printData.list)
      }
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.print-boxbody {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  padding: 40px;
  position: relative;
}

.dayCheck-box {
  background: #fff;
  padding: 30px 20px 20px;
  box-sizing: border-box;
  width: 1075px;
  font-weight: 300;
  font-size: 18px;
  font-family: "宋体";
}

.dayCheck-header {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
  font-weight: 300;
}

.dayCheck-title {
  display: flex;
}

.dayCheck-title-left {
  flex: 1;
}

.dayCheck-title-right {
  width: 300px;
}

.dayCheck-table {
  border: 1px solid #777;
  margin-top: 10px;
}

.dayCheck-table-th, .dayCheck-table-tr {
  display: flex;
}

.dayCheck-table-td {
  border-right: 1px solid #777;
  display: flex;
  align-items: center;
  justify-content: center;

}

.dayCheck-table-td:last-child {
  border-right: none;
}

.dayCheck-table-td .dayCheck-table-td-box p {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.dayCheck-table-th, .dayCheck-table-tr {
  border-bottom: 1px solid #777;
}

.dayCheck-table-tr:last-child {
  border-bottom: none;
}

.dayCheck-table-th .dayCheck-table-td {
  padding: 10px;
  text-align: center;
}

/*.dayCheck-table-tr .dayCheck-table-td {*/
/*  font-size: 14px;*/
/*}*/

.dayCheck-table-th .dayCheck-table-td:nth-child(1), .dayCheck-table-tr .dayCheck-table-td:nth-child(1) {
  width: 60px;
  text-align: center;
}

.dayCheck-table-th .dayCheck-table-td:nth-child(2), .dayCheck-table-tr .dayCheck-table-td:nth-child(2) {
  flex: 1;
}

.dayCheck-table-tr .dayCheck-table-td:nth-child(2) {
  padding: 12px 10px;
}

.dayCheck-table-th .dayCheck-table-td:nth-child(3), .dayCheck-table-tr .dayCheck-table-td:nth-child(3) {
  width: 110px;
}

.dayCheck-table-th .dayCheck-table-td:nth-child(4), .dayCheck-table-tr .dayCheck-table-td:nth-child(4) {
  width: 190px;
}

.dayCheck-table-th .dayCheck-table-td:nth-child(5), .dayCheck-table-tr .dayCheck-table-td:nth-child(5) {
  width: 120px;
  padding: 5px;
  box-sizing: border-box;
}

.dayCheck-table-th .dayCheck-table-td:nth-child(6), .dayCheck-table-tr .dayCheck-table-td:nth-child(6) {
  width: 190px;
  padding: 5px;
  box-sizing: border-box;
}

.dayCheck-table-th .dayCheck-table-td:nth-child(5), .dayCheck-table-th .dayCheck-table-td:nth-child(6) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dayCheck-remark-a, .dayCheck-remark-b {
  display: flex;
  align-items: center;
  border-top: 1px solid #777;
}

.dayCheck-remark-a-td-l {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.dayCheck-remark-b-td-line-a {
  display: flex;
  align-items: center;
}

.dayCheck-remark-a-td-box {
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.dayCheck-remark-a-td, .dayCheck-remark-b-td {
  width: 423px;
  border-right: 1px solid #777;
}

.dayCheck-remark-a-td:first-child, .dayCheck-remark-b-td:first-child {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dayCheck-remark-b-td:first-child, .dayCheck-remark-b-td:last-child {
  height: 130px;
}

.dayCheck-remark-a-td:last-child, .dayCheck-remark-b-td:last-child {
  flex: 1;
  border-right: none;
}

.dayCheck-remark-b-td-line {
  display: flex;
  padding: 5px 5px 5px 20px;
}

.dayCheck-remark-b-td-content {
  padding: 5px 20px;
}

.dayCheck-sign {
  border-top: 1px solid #777;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dayCheck-sign .dayCheck-sign-left {
  flex: 1;
  padding-left: 20px;
  display: flex;
  align-items: center;
}

.dayCheck-sign .dayCheck-sign-left img {
  /*width: 50px;*/
  height: 50px;
}

.dayCheck-sign .dayCheck-sign-right {
  /*flex: 1;*/
  padding-right: 20px;
}

.dayCheck-footer {
  font-size: 13px;
  font-weight: 300;
  margin-top: 20px;
}

.dayCheck-footer-title {
  /*font-weight: 3;*/
}

.box-i-span {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #777;
  position: relative;
  margin-left: 3px;
}

.box-i-span-in {
  position: absolute;
  top: -6px;
  left: -5px;
}

/**绿色勾*/

.myicon-tick-checked {

  display: inline-block;

  position: relative;

  width: 18px;
  height: 16px;

  border-radius: 50%;

  /*background-color: #2ac845;*/

}


.myicon-tick-checked:before, .myicon-tick-checked:after {

  content: '';

  pointer-events: none;

  position: absolute;

  color: #000;

  border: 2px solid;

  /*background-color: #000;*/

}

.myicon-tick-checked:before {
  width: 0px;
  height: 0px;
  left: 22%;
  top: 65%;
  -webkit-transform: skew(0deg, 50deg);
  transform: skew(0deg, 50deg);

}

.myicon-tick-checked:after {
  width: 7px;
  height: 0px;
  left: 45%;
  top: 42%;
  -webkit-transform: skew(0deg, -50deg);
  transform: skew(0deg, -50deg);

}

.btn-print-box {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  height: 40px;
  line-height: 40px;
  width: 120px;
  background: #20a0ff;
  box-shadow: 0 2px 2px #005b9f;
  text-align: center;
  border-radius: 5px;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  border:none;
}
.sign-list-line{
  display: flex;
  align-items: center;
}
</style>

